<div class="card-body background-color-light-blue text-center">
  <div class="row align-items-center">
    <div
      [ngClass]="{ 'col-lg-2': !forDisplayOnly, 'text-lg-end': !forDisplayOnly, 'mb-lg-3': forDisplayOnly }"
      class="mb-3 mb-lg-0">
      <b>Preview Session:</b>
    </div>
    <div
      [ngClass]="{'col-lg-5': !forDisplayOnly, 'col-lg-6': forDisplayOnly}"
      class="col-12 mb-3 mb-lg-0">
      <div class="row align-items-center justify-content-center">
        <select
          id="preview-student"
          [ngClass]="{ 'preview-example-select': forDisplayOnly }"
          class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select"
          [(ngModel)]="emailOfStudentToPreview"
          aria-label="Select student to preview as"
        >
          <option *ngFor="let student of studentsOfCourse" [ngValue]="student.email">
            [{{ student.teamName }}] {{ student.name }}
          </option>
        </select>
        <div class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content">
          <a
            *ngIf="emailOfStudentToPreview.length !== 0; else previewStudentBtn"
            tmRouterLink="/web/sessions/submission"
            [queryParams]="{
              courseid: courseId,
              fsname: feedbackSessionName,
              previewas: emailOfStudentToPreview
            }"
            target="_blank"
            rel="noopener noreferrer"
            [ngbTooltip]="
            emailOfStudentToPreview.length !== 0
            ? 'View how this session would look like to a student who is submitting feedback.'
            : 'Preview is unavailable if the course has yet to have any student enrolled.'
            "
          >
            <ng-container *ngTemplateOutlet="previewStudentBtn"></ng-container>
          </a>
        </div>
        <ng-template #previewStudentBtn>
          <button
            id="btn-preview-student"
            class="btn btn-primary"
            [disabled]="emailOfStudentToPreview.length === 0 || forDisplayOnly"
          >
            Preview as Student
          </button>
        </ng-template>
      </div>
    </div>
    <div
      [ngClass]="{'col-lg-5': !forDisplayOnly, 'col-lg-6': forDisplayOnly}"
      class="col-12">
      <div class="row align-items-center justify-content-center">
        <select
          id="preview-instructor"
          [ngClass]="{ 'preview-example-select': forDisplayOnly }"
          class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select"
          [(ngModel)]="emailOfInstructorToPreview"
          aria-label="Select instructor to preview as"
        >
          <option *ngFor="let instructor of instructorsCanBePreviewedAs" [ngValue]="instructor.email">
            {{ instructor.name }}
          </option>
        </select>
        <div class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content">
          <a
            *ngIf="emailOfInstructorToPreview.length !== 0; else previewInstructorBtn"
            tmRouterLink="/web/instructor/sessions/submission"
            [queryParams]="{
              courseid: courseId,
              fsname: feedbackSessionName,
              previewas: emailOfInstructorToPreview
            }"
            target="_blank"
            rel="noopener noreferrer"
            ngbTooltip="View how this session would look like to an instructor who is submitting feedback. Only instructors with submit privileges are included in the list."
          >
            <ng-container *ngTemplateOutlet="previewInstructorBtn"></ng-container>
          </a>
        </div>
        <ng-template #previewInstructorBtn>
          <button
            id="btn-preview-instructor"
            class="btn btn-primary"
            [disabled]="emailOfInstructorToPreview.length === 0 || forDisplayOnly"
          >
            Preview as Instructor
          </button>
        </ng-template>
      </div>
    </div>
  </div>
</div>
